/*
 * @Title: 活动-演艺活动详情
 * @Created by: ycq
 */
<template>
	<view class="detail">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='head-img' @click='back'>
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>活动详情</text>
		</view>
		<view class="banner" :style="{'margin-top':'60px'}" >
			<image class="banner-bg" src="/static/yanyiHD.png" mode="aspectFill"></image>
			<view class="banner-info">
				<image class="banner-info-img" src="/static/yanyiHD.png"  mode=""></image>
				<view class="banner-text">
					<text class="banner-name">[沈阳]椅子乐团2019“城市潜水” 巡回演唱会</text>
					<text class="price">￥<text style="font-size: 34upx;">98/人</text></text>
					<text class="bought">69人订过</text>
				</view>
			</view>
			
		</view>
		<view class="detail-info">
			<view class="info-area">
				<text class="info-title">2019.11.12周五19:00</text>
				<uni-icon type="arrowright"  size="20" color="rgba(110,164,255,1.00)" style='margin-top: 10upx;'></uni-icon>
				<text class="info-des">演出时长约120分钟（以现场我准）</text>
				<view class="hotel-info-btn">
					<image v-if="!isFenxiang" src="/static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="isFenxiang" src="/static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="!isShoucang" @click="coll()" src="/static/shoucang.png" mode=""></image>
					<image v-if="isShoucang" src="/static/shoucang-1.png" mode=""></image>
					<image v-if="!isAdd" src="/static/add.png" mode="" @click="todate()"></image>
					<image v-if="isAdd" src="/static/add-1.png" mode="" @click="todate()"></image>
					<image class="xingcheng" src="/static/xingcheng.png" mode="" @click="todate()"></image>
				</view>
			</view>
			
			<view class="info-area">
				<view class="address">
					<view class="address-info">
						<image src="/static/pos-blue.png" mode=""></image>
						<text class="city">大连庄河市仙人洞镇北部</text>
						<text class="way">乘坐198支线到仙人洞镇，步行650米</text>
						<text class="pl-num">1562条热门评论</text>
					</view>
				</view>
				<view class="begin">开始导航</view>
			</view>
			<view class="info-area">
				<view class="list-title">
					<text class='shu'></text>
					<text>详情</text>
					
				</view>
				<view @click="openJJ=!openJJ" :class="openJJ?'des-open':'des'">
					<text>【主题背景】不知道从何时起，我失去了对颜色的感，我的生命只剩下黑白灰三种颜色。看不到色彩的在生活中有诸多不便，，或许我可以从过的回忆中解开我的重...
					</text>
					<view class="detail-tip">
						<image class="down" src="/static/d-down.png" :style="{transform:(openJJ?'rotate(180deg)':'')}" mode=""></image>
						<view class="more-detail">{{openJJ?'收起详情':'更多详情'}}</view>
					</view>
				</view>
			</view>
			<view class="info-area">
				
				<view class="sm-list"   :style="{height:(openXZ?'auto':'400upx')}">
					<view class="list-title">
						<text class='shu'></text>
						<text>购买须知</text>
					</view>
					<view class="sm-item" v-for="(item,index) in smData" :key='index' >
						<text class="sm-title">{{item.name}}</text>
						<!-- <text class="sm-top">(此编辑内容仅用来展示)</text> -->
						<view class="sm-text">
							<view class="text-item" v-for="(text,index) in item.data" :key='index'  >
								<view style="width: 100%;height: auto;display: table;">
									<view class="item-dot"></view>
									<text>{{text}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="detail-tip" @click="openXZ=!openXZ">
					<image class="down" src="/static/d-down.png" :style="{transform:(openXZ?'rotate(180deg)':'')}" mode=""></image>
					<view class="more-detail">{{openXZ?'收起须知':'更多须知'}}</view>
				</view>
			</view>
			<Comment  :isShowPlBox="false" :isShowAllHead="true"   /> 
			
		</view>
		<pay-view v-if='toPay'></pay-view>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn"  @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<!-- <FootMenu navIndex='3'/> -->
		<view class="yuding-box">
			<text class="yuding-price">￥98</text>
			<button class="yuding" @click="payment">立即预订</button>
		</view>
		<Collection v-if='showColl' />
		<!-- <xingcheng-type v-if='this.$store.state.showXcType' :config='typeConfig'></xingcheng-type> -->
		<top-view></top-view>
	</view>
</template>

<script>
	import PaySuccess from '@/components/PaySuccess.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import Comment from '@/components/Comment.vue'
	export default{
		data(){
			return{
				isFenxiang:false,
				isShoucang:false,
				showColl:false,
				openJJ:false,
				openXZ:false,
				isAdd:false,
				type: '',//uniPopup组件类型
				mt:0,
				toPay:false,
				statusBarHeight:global.statusBarHeight + 'px',
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				smData:[
					{
						name:'预定说明',
						data:[
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场',
						]
					},
					{
						name:'温馨提示',
						data:[
							'开场前 10分钟 凭手机号入场',
							'提前3小时退',
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场',
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场'
						]
					},
				],
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			payment(){
				uni.navigateTo({
					url:'yanyiOrder'
				})
			},
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				this.$refs[type].close()
				document.body.style.overflow = 'scroll'
			},
			coll(){
				this.showColl=true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			todate(){
				uni.navigateTo({
					url:'/pages/common/date'
				})
			},
			closeXc(){
				this.showXc=false
				document.body.style.overflow = 'scroll'
			},
			addXcType(){
				this.showChooseType=true
				document.body.style.overflow = 'hidden'
			},
			closeXcType(){
				this.showChooseType=false
				this.$store.commit('showXcTypeUpdate',false)
				document.body.style.overflow = 'scroll'
			},
		},
		created(){
			
		},
		mounted() {
			this.getStatusTop();
		},
		components:{
			uniIcon,
			uniPopup,
			Comment
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.detail{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 110upx;
	}
	.head{
		width: 750upx;
		/* height: 124upx; */
		position: fixed;
		z-index: 2;
		height: auto;
		background: #FFFFFF;
	}
	.head-img{
		width: 79upx;
		height: 80upx;
		/* margin-top: 44upx; */
		float: left;
	}
	.head image{
		width: 36upx;
		margin-left: 29upx;
		margin-top:20upx;
		height: 36upx;
	}
	.head text{
		float: left;
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
		margin-top: 8upx;
	}
	.banner{
		width: 750upx;
		height: 322upx;
		margin-top: 120upx;
		
		position: relative;
	}
	.banner-bg{
		width: 750upx;
		position: absolute;
		height: 322upx;
		-webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
	}
	.banner-info{
		width: 750upx;
		height: 277upx;
		background: #FFFFFF;
		position: absolute;
		margin-top: 125upx;
		
	}
	.banner-info-img{
		width: 243upx;
		height: 329upx;
		margin-left: 33upx;
		margin-top: -96upx;
		float: left;
	}
	.banner-name{
		width: 100%;
		height: auto;
		display: block;
		margin-top: 28upx;
		font-size: 30upx;
	}
	.price{
		float: left;
		font-size: 28upx;
		color: rgba(65,99,254,1.00);
		margin-top: 80upx;
	}
	.bought{
		float: right;
		font-size: 28upx;
		color: rgba(153,153,153,1.00);
		margin-top: 88upx;
	}
	.detail-info{
		width:750upx;
		height: auto;
		margin-top: 50upx;
		display: table;
	}
	.banner-text{
		width: 420upx;
		height: 277upx;
		margin-right: 35upx;
		float: right;
	}
	.hotel-info-btn{
		width: 300upx;
		height: 37upx;
		padding-top: 20upx;
	}
	.hotel-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	.info-area{
		width:690upx;
		padding:30upx 30upx;
		height: auto;
		display: table;
		border-bottom: rgba(236,236,236,1.00) solid 15upx;
	}
	.info-area:last-child{
		border-bottom:none;
	}
	.info-area:first-child{
		border-bottom: rgba(236,236,236,1.00) solid 1upx;
	}
	.info-title{
		width:350upx;
		font-size: 32upx;
		height: 60upx;
		display: block;
		float: left;
		line-height: 60upx;
	}
	.info-des{
		width:640upx;
		font-size: 26upx;
		height: 60upx;
		margin-top:10upx;
		display: block;
		line-height: 60upx;
		color: #666666;
	}
	.info-pos{
		width:640upx;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.info-pos image{
		height: 25upx;
		width: 22upx;
		margin-top: 4upx;
	}
	.info-label{
		width:640upx;
		height: 60upx;
		display: block;
		text-align: center;
		line-height: 60upx;
		color: #999999;
		font-size: 28upx;
	}
	.info-text{
		width:640upx;
		height: 60upx;
		display: block;
		text-align: center;
		line-height: 30upx;
		color: #333333;
		font-size: 28upx;
	}
	.info-pos .info-text{
		width:100upx;
		text-align: left;
		margin-left: 20upx;
	}
	.info-content{
		width:600upx;
		font-size: 28upx;
		margin-left: 20upx;
		color: #666666;
		line-height: 10upx;
		text-align:justify;
	}
	.payment{
		width: 50%;
		margin:30upx auto;
		color: #FFFFFF;
	}
	.payment button{
		border-radius:100upx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #54B0FF , #577AFF);
	}
	.moy{
		color: #498CFB;
		float: right;
	}
		.hotel-info .address{
		margin-top: 30upx;
		margin-left: 37upx;
		width: 450upx;
		height: auto;
		display: table;
		float: left;
	}
	.address-info{
		width: 450upx;
		height: auto;
		float: left;
	}
	.address-info image{
		float: left;
		width: 26upx;
		margin-top: 10upx;
		height: 30upx;
	}
	.city{
		float: left;
		font-size: 28upx;
		height: 30upx;
		font-weight: bold;
		margin-left: 20upx;
	}
	.way{
		width: 450upx;
		display: block;
		margin-top: 60upx;
		font-size: 24upx;
		margin-left: 50upx;
		margin-bottom: 15upx;
		color: #888888;
	}
	.pl-num{
		font-size: 24upx;
		color: #888888;
		margin-left: 40upx;
		padding:10upx 39upx;
		margin-top: 30upx;
		background: rgba(246,246,246,1.00);
		border-radius: 30upx;
	}
	.begin{
		width: 202upx;
		height: 60upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		float: right;
		border-radius: 30upx;
		font-size: 30upx;
		position: absolute;
		right: 0;
		border: none;
		margin-top: 20upx;
		line-height: 60upx;
		margin-right: 24upx;
		text-align: center;
		color: #FFFFFF;
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
		margin-bottom: 20upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.list-title image{
		width: 30upx;
		height: 30upx;
		float: right;
		transform: rotate(90deg);
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.des text{
		width: 662upx;
		text-align:justify;
		margin-left: 14upx;
		text-indent:56upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 29upx;
		height: auto;
		font-size: 28upx;
		color: #888888;
	}
	.des-open text{
		width: 662upx;
		display: block;
		text-align:justify;
		margin-left: 14upx;
		text-indent:56upx;
		margin-top: 29upx;
		height: auto;
		font-size: 28upx;
		color: #888888;
	}
	.detail-tip{
		width: 100% !important;
		margin-top: 20upx;
		display: flex;
		flex-direction:row;
		align-items:center;
		justify-content:center; /*对齐方式*/
		
	}
	.detail-tip .down{
		width: 22upx;
		min-width: 14px;
		min-height: 14px;
		height: 22upx;
	}
	.detail-tip .more-detail{
		font-size: 28upx;
		color: #D9D9D9;
	}
	.sm-list{
		width: 100%;
		height: auto;
		overflow: hidden
	}
	.sm-item{
		margin-top: 30upx;
		width: 100%;
		height: auto;
		display: table;
	}
	.sm-item text{
		float: left;
		margin-left: 13upx;
	}
	.item-dot{
		width: 6upx;
		height: 6upx;
		background: rgba(242,135,40,1.00);
		border-radius: 50%;
		margin-left: 50upx;
		margin-top: 30upx;
		float: left;
	}
	.sm-text{
		width: 651upx;
		margin-left: 39upx;
	}
	.text-item{
		font-size: 28upx;
		color: #666666;
		line-height: 60upx;
	}
	.sm-top{
		font-size: 28upx;
		margin-left: 39upx;
		color: #666666;
		margin-top: 40upx;
	}
	.sm-title{
		font-size: 28upx;
		margin-bottom: 35upx;
		display: block;
		margin-left: 40upx !important;
	}
	.yuding-box{
		width: 750upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		height: 98upx;
		box-shadow:0px -1px 3px #dcdada
	}
	.yuding{
		width: 240upx;
		height: 98upx;
		float: right;
		color: #FFFFFF;
		text-align: center;
		font-size: 30upx;
		border: none;
		border-radius: 0;
		line-height: 98upx;
		background: -webkit-linear-gradient(top, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(top, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(top, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.yuding-price{
		font-size: 40upx;
		color: #E25115;
		margin-left: 46upx;
		line-height: 98upx;
	}
	
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
</style>
